<template>
  <div class="my_homepage">
    <div class="hp_top">
      <van-swipe :autoplay="3000" class="my_swiper">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>

      <div>
        <van-search
          class="hp_search"
          v-model="value"
          show-action
          label="地址"
          placeholder="请输入搜索关键词"
        >
          <template #action>
            <van-icon
              class="input_icon"
              name="location-o"
              color="#fff"
              size="18px"
              @click="$router.push('/map')"
            />
          </template>
        </van-search>
      </div>
    </div>

    <div class="hp_icon">
      <van-grid clickable :column-num="4" :border="false">
        <van-grid-item
          class="hp_icon_box"
          icon="wap-home-o"
          text="整租"
          color="#52ad72"
          to="/findhouse"
        />
        <van-grid-item
          class="hp_icon_box"
          icon="friends-o"
          color="#52ad72"
          text="合租"
          to="/findhouse"
        />
        <van-grid-item
          class="hp_icon_box"
          icon="upgrade"
          color="#52ad72"
          text="地图找房"
          to="/map"
        />
        <van-grid-item
          class="hp_icon_box"
          icon="shop-o"
          color="#52ad72"
          to="/torent"
          text="去出租"

        />
      </van-grid>
    </div>

    <div class="group">
      <van-row type="flex" justify="space-between">
        <van-col class="group_l">租房小组</van-col>
        <van-col span="3" offset="1" class="group_r">更多</van-col>
      </van-row>

      <div class="group_bottom">
        <div class="group_bottom_box" v-for="item in boxArr" :key="item.id">
          <div class="group_bottom_pic">
            <img :src="'http://liufusong.top:8080' + item.imgSrc" alt="" />
          </div>
          <div class="group_bottom_text">
            <p class="p1">{{ item.desc }}</p>
            <p class="p2">{{ item.title }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getHouseGroups } from '@/api/house'
export default {
  name: 'HomePage',

  data () {
    return {
      images: [
        'http://liufusong.top:8080/img/swiper/3.png',
        'http://liufusong.top:8080/img/swiper/1.png',
        'http://liufusong.top:8080/img/swiper/2.png'
      ],

      value: '',

      boxArr: []
    }
  },

  async created () {
    const data = await getHouseGroups()
    // console.log(data)
    this.boxArr = data.body
  }
}
</script>

<style scoped lang="less">
.my_homepage {
  // background-color: #f6f5f6;
  // position: relative;
  .hp_top {
    position: relative;
    // .input_icon{
    //   width: 5px;
    //   height: 5px;
    // font-size: 18px;
    // }
    .my_swiper img {
      width: 100%;
      height: 212px;
    }
    .hp_search {
      position: absolute;
      top: 28px;
      left: 10px;
      width: 95%;
      padding: 0 10px;
      z-index: 2;
      background-color: rgba(0, 0, 0, 0);
    }
  }

  .hp_icon {
    height: 122px;
    width: 100%;
    color: #52ad72;
    font-size: 20px;
    // background: #ccc;
    .hp_icon_box {
      width: 87px;
      height: 102px;
      text-align: center;
    }
  }
  .group {
    width: 375px;
    height: 17px;
    .group_l {
      font-weight: 800;
      padding-left: 10px;
    }
    .group_bottom {
      display: flex;
      // justify-content: space-around;
      justify-content: space-between;
      flex-wrap: wrap;
      .group_bottom_box {
        display: flex;
        justify-content: space-around;
        margin-top: 10px;
        width: 172px;
        height: 62px;
        border-radius: 5px;
        background-color: #f6f5f6;
        margin-left: 8px;
        margin-right: 7px;
        .group_bottom_pic img {
          margin-top: 5px;
          width: 50px;
          height: 50px;
        }
        .group_bottom_text {
          position: relative;
          color: #333;
          font-size: 14px;
          margin-right: 10px;
          .p1 {
            position: absolute;
            top: 17px;
            right: 0px;
          }
        }
      }
    }
  }
}
</style>
